<template>
  <div>
    <!-- 编辑模态框，弹出层 -->
    <el-dialog
      :title="dialogFormTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
    >
      <el-form :model="employeeModify" label-width="80px" style="width: 500px">
        <el-form-item label="姓名">
          <el-input v-model="employeeModify.ename"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="employeeModify.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="employeeModify.department.did"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in departments"
              :key="item.did"
              :label="item.dname"
              :value="item.did"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="employeeModify.birthdate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="邮箱" v-if="dialogFormTitle == '新增员工'">
          <el-input v-model="employeeModify.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyEmployee">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 搜索表单 -->
    <el-form :model="employee" label-width="80px" :inline="true">
      <el-form-item label="姓名">
        <el-input v-model="employee.ename"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="employee.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="部门">
        <el-select
          v-model="employee.department.did"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in departments"
            :key="item.did"
            :label="item.dname"
            :value="item.did"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllEmployeeButton">查询</el-button>
        <el-button type="primary" @click="toEmployeeAddPage">新增</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = true;
            dialogFormTitle = '新增员工';
          "
          >新增2</el-button
        >
        <el-button type="primary" @click="removeBatch">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据展示 -->
    <el-table
      :data="pageBean.beanList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="eid" label="员工编号" width="180">
      </el-table-column>
      <el-table-column prop="ename" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
      <el-table-column prop="birthdate" label="生日"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="department.dname" label="部门名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button size="mini" @click="handleEdit2(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[1, 2, 3]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 2,
      employee: { department: { did: null } },
      pageBean: {},
      departments: [],
      dialogFormVisible: false,
      employeeModify: { department: { did: null } },
      dialogFormTitle: "",
      multipleSelection: [],
    };
  },
  mounted() {
    this.getAllEmployee();
    this.getAllDepartment();
  },
  methods: {
    removeBatch() {
      if (this.multipleSelection.length > 0) {
        //选择的所以eid传到后端
        // let myeids = "?";
        // for (let i = 0; i < this.multipleSelection.length; i++) {
        //   myeids += "eids=" + this.multipleSelection[i].eid + "&";
        // }

        // this.$axios.get("/employee/removeBatch" + myeids).then((resp) => {
        //   this.$message("批量删除成功");
        // });

        // this.$axios
        //   .get("/employee/removeBatch", {
        //     params: {
        //       eids: 1,eids:2,eids:5
        //     },
        //   })
        //   .then((resp) => {
        //     this.$message("批量删除成功");
        //   });

        // this.$axios
        //   .post(
        //     "/employee/removeBatch" + myeids )
        //   .then((resp) => {
        //     this.$message('批量删除成功');
        //   });

        // this.$axios
        //   .post(
        //     "/employee/removeBatch" ,myeids )
        //   .then((resp) => {
        //     this.$message('批量删除成功');
        //   });

        let eids = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
         eids.push( this.multipleSelection[i].eid);
        }

        // this.$axios.post("/employee/removeBatch", {"eids":eids}).then((resp) => {
        //ES6,新增的语法:属性名和属性值相同可以省略
        this.$axios.post("/employee/removeBatch", {eids}).then((resp) => {
          this.$message("批量删除成功");
        });
      } else {
        this.$message("先选择");
      }
    },
    //复选按钮选项改变以后触发的事件处理方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //模态框关闭执行
    closeDialog() {
      //清空数据
      this.employeeModify = { department: { did: null } };
      //清空前端验证提示
    },
    //执行修改操作
    modifyEmployee() {
      if (this.dialogFormTitle == "修改员工") {
        console.log("axios发送修改请求");
      } else {
        console.log("axios发送添加请求");
      }

      // this.$axios.post("/employee/modify", this.employeeModify).then((resp) => {
      //   if (resp.data.code == 200) {
      //     this.$message("修改成功");
      //     this.getAllEmployee();
      //   } else {
      //     //101  100
      //     this.$message(JSON.stringify(resp.data.msg));
      //   }
      // });
      this.dialogFormVisible = false;
    },
    //编辑事件2
    handleEdit2(index, row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle = "修改员工";
      //回显数据
      // this.$axios
      //   .get("/employee/getByEid/" + row.eid)
      //   .then((resp) => {
      //     this.employeeModify = resp.data.data;
      //   });
      //ES6,浅拷贝
      this.employeeModify = { ...row };
    },
    //编辑事件1
    handleEdit(index, row) {
      console.log(index, row);
      // this.$router.push("/employeeModify/"+row.eid);
      //params+path不支持对象
      // this.$router.push({ path: "/employeeModify/"+row })
      //params+name,对象
      // this.$router.push({ name: 'employeeModify', params: { eid: row } })
      //params+name,eid
      // this.$router.push({ name: 'employeeModify', params: { eid: row.eid } })
      // query+path,eid
      this.$router.push({ path: "/employeeModify", query: { eid: row } });
    },
    //删除事件
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/employee/removeByEid/" + row.eid).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getAllEmployee();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //跳转新增页面
    toEmployeeAddPage() {
      this.$router.push("/employeeAdd");
    },
    //查询所有部门
    getAllDepartment() {
      this.$axios.get("/department/getAll").then((resp) => {
        this.departments = resp.data.data;
      });
    },
    //按钮查询
    getAllEmployeeButton() {
      this.pageIndex = 1;
      this.pageSize = 2;
      this.getAllEmployee();
    },
    //页大小改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //重新查询
      this.pageSize = val;
      this.getAllEmployee();
    },
    //页索引改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getAllEmployee();
    },
    // 查询所有员工
    getAllEmployee() {
      this.$axios
        .post(
          "/employee/getAll/" + this.pageIndex + "/" + this.pageSize,
          this.employee
        )
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },
  },
};
</script>

<style>
</style>